<div id="app" >
    <admin-page-header> 
        <bi-button icon="fa-plus" @click="$go({action:'edit'})"  type="primary">添加优惠券</bi-button>
        <bi-button  @click="openGroupDialog" >管理分组</bi-button>
    </admin-page-header>

    <div class="container">
        <div class="row g-2">
            <div class="col-12">
                <bi-card title="搜索">
                    <div class="row g-3">
                        <div class="col-12 col-sm-3 col-lg-3">
                             <bi-select v-model="search.status" placeholder="状态" :option="$pageData.statusOption" ></bi-select>
                        </div>
                        <div class="col-12 col-sm-3 col-lg-3">
                            <bi-select v-model="search.group_id" placeholder="分组">
                                <bi-select-option v-for="(item,index) in groupList" :key="item.group_id" :value="item.group_id" :label="item.title" ></bi-select-option>
                            </bi-select>
                        </div>
                        
                        <div class="col-12 col-sm-6 col-lg-6">
                            <bi-input v-model="search.keyword"  placeholder="关键字" icon="fa fa-search" ></bi-input>
                        </div>
                    </div>
                </bi-card>
            </div>
            <div class="col-12">
                <bi-card title="优惠券">
                    <bi-table :data="list" :loading="loading"  min-height="300" >
                        <bi-table-column label="状态" name="status"  v-slot="{row}" width="50" >
                            <bi-icon v-if="row.status == 'off'" data="fa-ban" class="text-danger" ></bi-icon>
                            <bi-icon v-if="row.status == 'sale'" data="fa-check" class="text-success" ></bi-icon>
                        </bi-table-column>
                        <bi-table-column label="类型"   width="80" v-slot="{row}">
                            <template v-if="row.type=='goods'">商品卷</template>
                            <template v-else>运费卷</template>
                        </bi-table-column>
                        <bi-table-column label="标题"  v-slot="{row}">
                            <div class="coupon-box">
                                <div class="title">{{couponTitle(row)}}</div>
                                <div class="desc">{{row.desc}}</div>
                            </div>
                        </bi-table-column>
                        <bi-table-column label="库存" name="stock" width="80" ></bi-table-column>
                        <bi-table-column label="有效期"  width="180" v-slot="{row}" >
                            <div>
                                {{row.starttime}} </br>
                                {{row.endtime}}
                            </div>
                        </bi-table-column>
                        <bi-table-column label="适用商品" width="80" v-slot="{row}"  >
                            <template v-if="row.apply_type=='all'">全部商品</template>
                            <template v-else><bi-button  @click="showApplyGoods(row.coupon_id)" type="link">查看</bi-button></template>
                        </bi-table-column>
                        <bi-table-column label="操作" width="180" v-slot="{row}">
                            <template v-if="row.status!='sale'">
                                <bi-button type="primary" @click="handleStatus(row,'sale')" >上架</bi-button>
                                <bi-button type="primary" @click="$go({action:'edit',gets:{id:row.coupon_id}})">编辑</bi-button>
                                <bi-button type="warning" @click="handleDel(row)" >删除</bi-button>
                            </template>
                            <template v-else>
                                <bi-button type="primary" @click="handleSend(row)" >分发</bi-button>
                                <bi-button type="danger" @click="handleStatus(row,'off')" >下架</bi-button>
                            </template>
                        </bi-table-column>
                       </bi-table>
                    </bi-table>

                    <template #footer> 
                        <bi-pagination v-model="page" :total="total" :count="count" ></bi-pagination>
                    </template>
                </bi-card>
            </div>
        </div>
    </div>
</div>


<script>
import {debounce} from '@@/admin/assets/js/global.js';
import groupDialog from 'goodsTag/group-dialog.vue';
import applyGoodsDialog from 'coupon/apply-goods-dialog.vue';
let app = admin.createApp({
    data(){
        let search  = {
            status:'',
            keyword:'',
        }


        this.$assign(search,this.$status.get('search'));

        return {
            search,
            list:[],
            groupList:[],
            loading:false,
            page:this.$status.get('page')??1,
            statusList:this.$pageData.statusList,
            total:0,
            count:0
        }
    },
    watch:{
        search:{
            handler:debounce(function(val){
                
                this.refresh();
            },1000),
            deep:true
        }       
    },
    methods:{
        getGroupList(){
            this.$ajax({
                url:this.$url({action:'groupList'}),
                success:(res)=>{
                    this.groupList = res;
                }
            })
        },
        refresh(){
            this.loading = true;
            this.$status.set('page',this.page);
            this.$status.set('search',this.search);

            this.$ajax({
                url:this.$url({action:'list'}),
                data:{
                    page_current:this.page,
                    ...this.search
                },
                success:(res)=>{
                    this.list  = res.list;
                    this.count = res.count;
                    this.total = res.total;
                },
                over:()=>{
                    this.loading = false;
                }
            })
        },
        addDialog(){

        },
        openGroupDialog(){
            this.$dialog({
                type:'vue',
                content:admin.createApp(groupDialog),
                callback:()=>{
                    this.getGroupList();
                    this.getList();
                }
            });
        },
        handleStatus(row,status){
            let title = '';

            if (status=='sale') title = '上架';
            else if (status=='off') title = '下架';

            this.$confirm('确定要'+title+'吗？',()=>{
                this.$ajax({
                    url:this.$url({action:'status'}),
                    data:{
                        coupon_id:row.coupon_id,
                        status
                    },
                    success:()=>{
                        this.$toast('操作成功');
                        this.refresh();
                    }
                });
            });
            
        },
        showApplyGoods(id){
            
            this.$dialog({
                type:'vue',
                content:admin.createApp(applyGoodsDialog,{id})
            });
        },
        couponTitle(row){
            return '满'+row.condition_price+' 减 ' + row.price+' 元';
        }
    },
    mounted(){
        this.refresh();
        this.getGroupList();
    }
}).mount('#app');
</script>

<style>
.coupon-box .title{
    font-weight: bold;
    font-size: 16px;
}
.coupon-box .desc{
    color: #999;
}
</style>